<template>
  <el-dialog append-to-body class="common_dialog" custom-class="reset-dialog-width" :visible.sync="visible" :title="!queryParams.id ?'添加DB人员' : '修改DB人员'" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="form" :rules="dataRule" ref="form" label-width="120px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" :maxlength="20" placeholder="请输入姓名（最多20个字）" clearable />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="form.mobile" oninput="if(value.length>11)value=value.slice(0,11)" onkeyup="this.value = this.value.replace(/[^\d]/g,'');" placeholder="请输入手机号" clearable />
      </el-form-item>
      <!-- <el-form-item label="负责的柜子名称">
        <div class="item_flex">
          <div class="flex" style="margin-right:20px;">是的，是的，是的，是的发鬼地方谁订饭，谁订饭，第三方是的是的，大是大非谁订饭谁订饭是的防守打法， 颠三倒四三大发的，是的，是的，是的，是的发鬼地方谁订饭，谁订饭，第三方是的是的，大是大非谁订饭谁订饭是的防守打法， 颠三倒四三大发的，</div>
          <el-button size="mini" type="primary" icon="el-icon-circle-plus" @click="addCabinet()">添加智能柜</el-button>
        </div>

      </el-form-item> -->
      <!-- <el-form-item label="柜组编号" prop="cabinetGroupNo">
        <el-select v-model="form.cabinetGroupNo" filterable multiple remote reserve-keyword placeholder="请输入柜组编号" :remote-method="remoteMethod" :loading="loading">
          <el-option v-for="item in cabinetGroupNoOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="所在城市" prop="city">
        <el-select v-model="form.city" placeholder="请选择所在城市" clearable @change="changeCity">
          <el-option v-for="item in cityList" :key="item.id" :label="item.mergename" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所在区域" prop="regionId">
        <el-select v-model="form.regionId" placeholder="请选择所在区域" clearable :disabled="regionListDisabled">
          <el-option v-for="item in regionList" :key="item.id" :label="item.details" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
     <!-- 新增智能柜弹窗 -->
    <cabinetList v-if="cabinetListVisible" ref="cabinetList"></cabinetList> 
    <template slot="footer">
      <el-button :loading="confirmLoading" type="primary" @click="formSubmitHandle()">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
import { cabinetGroupGetAll } from "@/api/deliver/cabinetGroup";
import { findInRegionList } from "@/api/basic/area/area";
import { findRegionByAreaId } from "@/api/basic/region/region";
import { extensionWorkerSave, getExtensionWorker } from "@/api/marketing/extensionWorker";
import CabinetList from '@/views/delivery/cabinetListDialog.vue'  //查看智能柜弹窗
export default {
  data() {
    return {
      visible: false,
      form: {
        cabinetGroupNo: '',
        mobile: '',
        name: '',
        regionId: '',
        city: '',
      },
      confirmLoading: false,
      queryParams: {},
      regionListDisabled: true,
      cityList: [],//城市列表
      regionList: [], //区域列表
      loading: false, //柜组搜索加载
      cabinetGroupNoList: [], //柜组列表
      cabinetGroupNoOptions: [], //柜组编号option
      cabinetListVisible:false, //智能柜弹窗是否显示
    }
  },
  components: {
    CabinetList
  },
  computed: {
    dataRule() {
      return {
        name: [
          { required: true, message: '请输入姓名', trigger: 'change' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'change' }
        ],
        cabinetGroupNo: [
          { required: true, message: '请输入柜组编号', trigger: 'change' }
        ],
      }

    }
  },
  methods: {
    init() {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['form'].resetFields()
        this.reset()
        this.confirmLoading = false
        this.form.id = this.queryParams.id ? this.queryParams.id : ''
        this.cabinetGroupNoList = []
        findInRegionList().then(response => {
          this.cityList = response.data
        })
        cabinetGroupGetAll().then((res) => {
          res.data.map((item) => {
            this.cabinetGroupNoList.push({
              value: `${item.cabinetGroupNo}`,
              label: `${item.cabinetGroupNo}`,
            })
          })
        })
        this.queryParams.id ? this.getInfo() : ''
      })
    },
    // 重置表单
    reset() {
      this.form = {
        id: null,
        cabinetGroupNo: '',
        mobile: '',
        name: '',
        regionId: '',
        city: '',
      };
    },
    // 添加智能柜
    addCabinet() {
      this.cabinetListVisible = true
      this.$nextTick(() => {
        // this.$refs.cabinetList.
        this.$refs.cabinetList.init()
      })
    },
    // 柜组编号远程搜索方法
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.cabinetGroupNoOptions = this.cabinetGroupNoList.filter(item => {
            return item.label.toLowerCase()
              .indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.cabinetGroupNoOptions = [];
      }
    },
    // 获取信息
    getInfo() {
      const id = this.queryParams.id
      getExtensionWorker(id).then(response => {
        response.data.city = response.data.city ? Number(response.data.city) : ''
        this.getFindRegionByAreaId(response.data.city)
        this.form = response.data;
      });
    },
    // 选择城市，城市改变后执行
    changeCity(value) {
      if (this.form.city) {
        //切换的时候城市清空，防止bug
        this.form.regionId = ''
        this.regionList = [];
        this.regionListDisabled = false;
        this.getFindRegionByAreaId(this.form.city)
      } else {
        this.regionList = [];
        this.regionListDisabled = true;
      }
    },
    // 获取区域列表
    getFindRegionByAreaId(id) {
      id ? findRegionByAreaId(id).then(response => {
        this.regionList = response.data
      }) : '';
    },
    // 表单提交
    formSubmitHandle: debounce(function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.confirmLoading = true
          extensionWorkerSave(this.form).then(response => {
            this.$modal.msgSuccess("操作成功");
            this.visible = false
            this.confirmLoading = false
            this.$emit('refreshDataList')
          }).catch(() => {
            this.confirmLoading = false
          });
        }
      })
    }, 1000, { 'leading': true, 'trailing': false }),

  }
}
</script>
<style lang="scss" scoped>
.item_flex {
  display: flex;
  align-items: center;
  .flex {
    // flex: auto;
    // margin-right: 20px;
    line-height: 20px;
  }
}
</style>
